<!-- 课程分类管理 -->
<template>
    <div class="app-container">
        <div>
            <router-link to="/university/exlesson">
                <el-button type="text" icon="el-icon-arrow-left" size="default">返回</el-button>
            </router-link>
        </div>

        <el-form :inline="true" size="small">
            <el-form-item label="分类编号">
                <el-input v-model="kwd1" placeholder="请输入分类编号" size="small"></el-input>
            </el-form-item>
            <el-form-item label="分类名称">
                <el-input v-model="kwd2" placeholder="请输入分类名称" size="small"></el-input>
            </el-form-item>

            <el-button icon="el-icon-search" type="primary" size="small" @click>搜索</el-button>
            <el-button icon="el-icon-refresh" size="small" @click>重置</el-button>
            <el-button icon="el-icon-edit" type="warning" size="small" @click="add()"
                >新增</el-button
            >
            <el-button icon="el-icon-delete" type="danger" size="small" @click>删除</el-button>
        </el-form>

        <div style="margin-top: 20px">
            <el-table :data="cate_list" border stripe>
                <el-table-column type="selection" align="center" width="60" />

                <template v-for="(col, index) in columns">
                    <el-table-column
                        :prop="col.data"
                        :key="col.id"
                        :label="col.label"
                        align="center"
                        :width="col.width"
                    ></el-table-column>
                </template>
                <el-table-column label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)"
                            >编辑</el-button
                        >
                        <el-button
                            type="text"
                            icon="el-icon-delete"
                            style="color: #f66"
                            @click="deleteCategory(scope.$index)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page.sync="pageData.page"
                :page-sizes="[20, 40, 80, 100]"
                :page-size="pageData.limit"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
            />
        </div>

        <!-- 添加分栏 -->
        <el-dialog title="添加分栏" :visible.sync="showEdit" width="35%" @close="showAdd = false">
            <el-form
                :model="cData"
                ref="form2"
                :rules="rules"
                label-width="150px"
                :inline="false"
                size="normal"
                class="dbox"
            >
                <el-form-item label="分类编号">
                    <el-input v-model="cData.id" style="width: 270px" clearable></el-input>
                </el-form-item>
                <el-form-item label="分类名称">
                    <el-input v-model="cData.name" style="width: 270px" clearable></el-input>
                </el-form-item>
                <el-form-item label="分类信息">
                    <el-input v-model="cData.info" style="width: 270px" clearable></el-input>
                </el-form-item>
                <el-form-item label="首页排序">
                    <el-input v-model="cData.order" style="width: 270px" clearable></el-input>
                </el-form-item>
                <el-form-item label="是否置顶至课程首页">
                    <el-switch v-model="cData.inLeHome" :active-value="true" :inactive-value="false" @change="">
                    </el-switch>
                </el-form-item>
                <el-form-item label="课程首页排序">
                    <el-input v-model="cData.leOrder" style="width: 270px" clearable></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer">
                <el-button @click="showAdd = false">取消</el-button>
                <el-button type="primary" @click>提交</el-button>
            </span>
        </el-dialog>

        
    </div>
</template>

<script>
import {
    createCategory,
    categoryDetail,
    updateCategory,
    deleteCategory,
    categoryList,
} from "@/api/article";
export default {
    data () {
        return {
            kwd1: "",
            kwd2: "",
            cData: {},
            showEdit: false,
            rules: {},
            i: "", //cate_id
            uData: {},
            pageData: {
                page: 1,
                limit: 10,
            },
            total: 10,
            cate_list: [
                {
                    id: "1",
                    name: "1",
                    info: "1",
                    sortOrder: "1",
                },
                {
                    id: "2",
                    name: "2",
                    info: "2",
                    sortOrder: "2",
                },
                {
                    id: "3",
                    name: "3",
                    info: "3",
                    sortOrder: "3",
                },
                {
                    id: "4",
                    name: "4",
                    info: "4",
                    sortOrder: "4",
                },
            ],
            columns: [
                { key: 0, label: `分类编号`, data: "id", visible: true, width: 80 },
                { key: 1, label: `分类名称`, data: "name", visible: true },
                { key: 2, label: `分类信息`, data: "info", visible: true },
                { key: 3, label: `首页排序`, data: "order" },
                { key: 3, label: `是否推荐至课程首页`, data: "inLeHome"  },
                { key: 3, label: `课程首页排序`, data: "leOrder"  }
            ],
        };
    },
    created () { },
    methods: {
        getCategoryList () { },
        add () {
            this.cData = {};
            this.showEdit = true;
        },
        edit (i) {
            this.cData = i;
            this.showEdit = true;
        },
        detail (i) {
            console.log(i);
            this.i = i;
            this.showDetail = true;
        },
        createCategory () {
            createCategory(this.cData).then((r) => { });
        },
        getCategoryDetail () {
            categoryDetail().then((r) => {
                console.log(r);
            });
        },
        updateCategory (i) {
            updateCategory(this.uData).then((r) => {
                console.log(r);
            });
        },
        deleteCategory (i) {
            this.$confirm("确认删除所选数据？", "确认删除", {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.$message.warning("删除成功！");
                    this.cate_list.splice(i, 1);
                })
                .catch(() => { });
        },
        beforeCoverUpload () { },

        sizeChange (a) {
            this.pageData.limit = a;
            this.getCategoryList();
        },
        currentChange (a) {
            this.pageData.page = a;
            this.getCategoryList();
        },
    },
};
</script>
<style>
.sok {
    color: #5cb87a;
    width: 60px;
    margin: 0 auto;
    border: 1px solid #5cb87a;
    background: #fff;
    border-radius: 5px;
}
.sfail {
    color: #f56c6c;
    width: 60px;
    margin: 0 auto;
    border: 1px solid #f56c6c;
    background: #fff;
    border-radius: 5px;
}
.btnBox {
    height: 130px;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: center;
}
.btnBox .el-button {
    margin: 0;
}
</style>
